<template>
	<div class="system-menu-container">
		<el-form :inline="true" ref="dataFormRef"  :model="param" @keyup.enter.native="getDataList()" label-width="120px">
			<el-row >
				<el-col :span="8">
					<el-form-item label="姓名" prop="staff_name">
						<el-input v-model="param.staff_name" placeholder="姓名" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="起始时间" prop="oper_time_start">
						<el-date-picker v-model="param.oper_time_start" type="date" placeholder="起始时间"  value-format="YYYY-MM-DD" format="YYYY-MM-DD">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-button type="primary" icon="ele-Search" @click="getDataList()">查询</el-button>
				</el-col>
			</el-row>
			<el-row >
				<el-col :span="8">
					<el-form-item label="用户名"  prop="username">
						<el-input v-model="param.username" placeholder="用户名" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="结束时间" prop="oper_time_end">
						<el-date-picker v-model="param.oper_time_end" type="date" placeholder="结束时间"  value-format="YYYY-MM-DD" format="YYYY-MM-DD">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-button type="primary" icon="ele-Refresh" @click="reSetForm(dataFormRef)">重置</el-button>
				</el-col>
			</el-row>

		</el-form>
		<el-table :data="dataList" @selection-change="selectionChangeHandle" style="width: 100%" v-loading="dataListLoading">
			<el-table-column prop="staff_name" width="100" label="用户姓名"></el-table-column>
			<el-table-column prop="username" width="100" label="用户名"></el-table-column>
			<el-table-column prop="module" width="150" label="功能模块"></el-table-column>
			<el-table-column prop="description" label="用户操作"></el-table-column>
			<el-table-column prop="methods" width="150" :show-overflow-tooltip="true" label="请求方法"></el-table-column>
			<el-table-column prop="action_time" width="100" label="用时(毫秒)"></el-table-column>
			<el-table-column prop="user_ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
			<el-table-column prop="oper_time" width="150" label="操作时间"></el-table-column>
		</el-table>
		<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="param.page"
				background
				v-model:page-size="param.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total" small>
			</el-pagination>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue';
import type { FormInstance, ElTree } from 'element-plus'
import {systemApi} from '/@/api/systemapi'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

export default defineComponent({
	name: 'systemTenant',
	setup() {
		const dataFormRef = ref<FormInstance>()
		const state = reactive({
			dataList: [],
			total: 0,
			loading: false,
			dataListLoading: false,
			selectionDataList: [],
			param: {
				page: 1,
				limit: 10,
				staff_name: "",
				username: "",
				user_ip: "",
				oper_time_start: "",
				oper_time_end: ""
			}
		})
		const getDataList = () => {
			if (state.param.oper_time_start != "" && state.param.oper_time_end != "") {
				if (state.param.oper_time_start > state.param.oper_time_end) {
					ElMessage.error('查询条件操作时间起始时间不可以比结束时间迟！')
				return
				}
			}
			state.dataListLoading = true
			systemApi().querySystemLog(state.param).then(data => {
				if (data && data.code === 0) {
					state.dataList = data.page.list;
					state.total = data.page.totalCount;
				} else {
					state.dataList = [];
					state.total = 0;
				}
			}).catch(() => {
				ElMessage.error('查询失败')
			}).finally(() => {
				state.dataListLoading = false
			})
		}
		const reSetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.resetFields()
			state.param.page = 1
			getDataList()
		}

		const selectionChangeHandle = (val: any) => {
			state.selectionDataList = val
		}
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.param.limit = val;
			getDataList()
		}
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.param.page = val;
			getDataList()
		}
		// 页面加载时
		onMounted(() => {
			getDataList()
		})

		return {
			dataFormRef,
			getDataList,
			reSetForm,
			selectionChangeHandle,
			onHandleSizeChange,
			onHandleCurrentChange,
			...toRefs(state),
		}
	}
})
</script>

<style scoped>

</style>